<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        *{margin:0;padding:0;box-sizing: border-box;}
        .container{
            width: 400px; 
            min-height: 400px;
            margin: 100px;
        }
        .container img{
            width: 100%;
        }
        .small-imgs{
            display:flex;
            justify-content:space-between;
        }
        .small-imgs .item{
            width: 18%;
            border:solid 1px #ddd;
            padding: 5px;
        }

        .small-imgs .cur{
            border:solid 1px rgb(27, 26, 94);
        }
       
    </style>
</head>
<body>
    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Goods extends React.Component {
            
            state = {
                imgs: [ //所有的图片路径
                    './1.jpg',
                    './2.jpg',
                    './3.jpg',
                    './4.jpg',
                    './5.jpg',
                ],
                index: 4  //当前显示图片的下标
            }

            render(){
                //解构赋值
                let {imgs, index} = this.state;

                return <div className="container">
                        <div className="big-img">
                            <img src={imgs[index]} alt=""/>    
                        </div>
                        <div className="small-imgs">
                            {
                                imgs.map((item, i) => {
                                    return <div onClick={this.change(i)}  className={"item " + (i === index ? 'cur' : '')} key={i}>
                                        <img src={item} alt=""/>     
                                    </div>
                                })
                            }
                        </div>
                    </div>  
            }

            change = (index) => {
                return () => {
                    this.setState({
                        index: index
                    })
                }
            }
        }

        ReactDOM.render(<Goods />, document.querySelector('#root'));
    </script>
</body>
</html>